import React, { Component } from 'react';
import { Link, routerRedux } from 'dva/router';
import { connect } from 'dva';
import { List, InputItem, Toast, Flex,Icon,WingBlank,Button,Grid} from 'antd-mobile';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import MyScroll from "../../components/MyScroll/MyScroll";

const {Item} =List;

class PaySuccess extends Component {
    constructor(props) {
        super(props);
        this.state={
            error: "",
            obj: {},

            res: {},
        }

    }

    componentDidMount() {
        var obj = {};
        decodeURIComponent(this.props.location.search).replace(/([^?&=]+)=([^?&=]*)/g, (m, p1, p2) => {
            obj[p1] = p2;
            return m;
        });

        var orderId;
        console.warn(obj.state.split(",")[4], '查看orderId 这个属性是否存在。。。。。');
        if (obj.state.split(",")[4]) orderId = obj.state.split(",")[4];

        this.setState({obj: {code: obj.code, orderCode: obj.state.split(",")[2], data: obj.state}});
    }



    render() {
        const {dispatch} =this.props;

        console.log(this.state.obj.data);

        return (
            <Flex style={{
                height:"100%",
                width:"100%"
            }} direction="column"

            >
                <NavTopBar dispatch={dispatch} title="微信确认支付"/>
                <MyScroll>
                <p style={{width: "100%", textAlign: "center",margin: "1.5rem 0 0", fontSize: ".34rem", color: "#FF0036"}}>共计金额</p>
            <p style={{width: "100%", textAlign: "center",margin: ".2rem 0 0"}}>￥<span style={{fontSize: ".34rem"}}>{this.state.obj.data && this.state.obj.data.split(",")[0]}</span></p>
        <Button style={{margin: ".8rem auto 0", width: "70%", height: ".9rem", lineHeight: ".9rem", fontSize: ".34rem"}} type="primary" onClick={ () => {
                            // var obj = {};
                            // console.log(this.props.location);
                            // this.props.location.search.replace(/([^?&=]+)=([^?&=]*)/g, (m, p1, p2) => {
                            //     console.log(p1, "p1");
                            //     console.log(p2, "p2");
                            //     obj[p1] = p2;
                            // });
                            this.props.dispatch({type: "orderList/WeiXinPayment", obj: {...this.state.obj}}).then(res => {
                            // this.props.dispatch({type: "orderList/WeiXinPayment", obj: {...this.state.obj, orderCode: this.props.match.params.data}}).then(res => {
                                if (res.code == 200) {
                                    this.setState({res: res});
                                    console.log(res, "res....");

                                    WeixinJSBridge.invoke(
                                      'getBrandWCPayRequest', {
                                        "appId": res.ret.appId,     //公众号名称，由商户传入
                                        "timeStamp": res.ret.timeStamp,         //时间戳，自1970年以来的秒数
                                        "nonceStr": res.ret.nonceStr, //随机串
                                        "package": res.ret.packageval,
                                        "signType": res.ret.signType,         //微信签名方式：
                                        "paySign": res.ret.paySign //微信签名
                                    },res => {
                                        //if(res.err_msg == "get_brand_wcpay_request:ok" ) {}     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
                                        if (res.err_msg == "get_brand_wcpay_request:ok") {
                                            console.log(res, "微信返回res....");
                                            // this.props.dispatch(routerRedux.push({pathname: `/paySuccess/${this.state.obj.data}`}))

                                          Toast.info("微信支付成功!", 1.5, () => {
                                              this.props.dispatch(routerRedux.push({pathname: `/paySuccess/${this.state.obj.data}`}))
                                          });
                                          // const friendPay = localStorage.getItem('friendPay');
                                          // if (friendPay) {
                                          //   localStorage.removeItem('friendPay');
                                          //   window.location.href = friendPay;
                                          // } else {
                                          //   window.location.href = 'order.html#/paySuccess/' + orderCode;
                                          // }

                                          this.props.dispatch(routerRedux.push({pathname: `/paySuccess/${this.state.obj.data}`}))
                                        } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                          Toast.info("用户取消支付!");
                                          this.props.dispatch(routerRedux.push({pathname: `/payMent/${this.state.obj.data}`}))
                                        } else {
                                          // Toast.info(res.err_msg);
                                          alert(JSON.stringify(res));
                                          Toast.info("用户支付失败!");
                                          alert(res.err_msg);
                                          this.props.dispatch(routerRedux.push({pathname: `/payMent/${this.state.obj.data}`}))
                                          //Toast.info("支付失败!");
                                          //window.location.href = 'home.html';
                                        }
                                      });



                                    // this.props.dispatch(routerRedux.push({pathname: "/paySuccess"}))
                                } else {
                                    this.setState({error: res.msg})
                                }


                            })
                        } }>确认支付</Button>
                    <Button style={{margin: ".5rem auto 0", width: "70%", backgroundColor: "#D0D0D0", height: ".9rem", lineHeight: ".9rem", fontSize: ".34rem"}} onClick={ () => {
                            this.props.dispatch(routerRedux.goBack());
                        } }>取消支付</Button>
                    {/* <p>{this.state.error}</p>
                    <p>{ encodeURIComponent(window.location.href)}</p>
                    <p>data: {this.props.match.params.data}</p>
                    <p>appId: { this.state.res.ret && this.state.res.ret.appId}</p>
                    <p>timeStamp: { this.state.res.ret && this.state.res.ret.timeStamp}</p>
                    <p>nonceStr: { this.state.res.ret && this.state.res.ret.nonceStr}</p>
                    <p>packageval: { this.state.res.ret && this.state.res.ret.packageval}</p>
                    <p>signType: { this.state.res.ret && this.state.res.ret.signType}</p>
                    <p>paySign: { this.state.res.ret && this.state.res.ret.paySign}</p> */}
                </MyScroll>

            </Flex>
        );
    }
}

export default connect(({ orderList }) => ({ orderList }))(PaySuccess);
